<template>
  <div class="admin-login-container">
    <a-card title="管理员登录" style="max-width: 350px; margin: 80px auto;">
      <a-form :model="form" @submit.prevent="onLogin">
        <a-form-item label="账号">
          <a-input v-model:value="form.username" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input-password v-model:value="form.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" block @click="onLogin">登录</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { apiAdminLogin } from '@/api/admin-api';

const router = useRouter();
const form = ref({ username: '', password: '' });

async function onLogin() {
  try {
    const res = await apiAdminLogin(form.value);
    if (res.data.code === 200) {
      localStorage.setItem('admin_token', res.data.data);
      message.success('登录成功');
      router.push('/admin');
    } else {
      message.error(res.data.message || '账号或密码错误');
    }
  } catch (e) {
    message.error('登录失败，请检查网络或服务器');
  }
}
</script>

<style scoped>
.admin-login-container {
  min-height: 100vh;
  background: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 